import './Index.css';
import {Link} from "react-router-dom";
import BookPython from '../../../assets/images/book_python.jpg';

function Special() {
	return (
		<div className="main">
			<div className="main_con">
				<div className="list_con">
					<ul>
						<li className="list_item">
							<Link to="#">
								<div className="special_img"
								     style={{backgroundImage: "url(" + BookPython + ")" }} />
							</Link>
							<div className="text_con">
								<Link to="#">
									<p className="text_con_title">Vue3核心源码详解38讲</p>
								</Link>
								<p className="text_desc">全面分析 Vue 源码，透彻掌握 Vue 技术原理</p>
								<div className="text_info">
									<i className="iconfont">&#xe654;</i>
									<span>共38节</span>
									<i className="iconfont">&#xe654;</i>
									<span>1人已购买</span>
								</div>
								<div className="try_read_book">
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="01 开篇词：学习 Vue 源码，打开前端晋级之路">01 开篇词：学习 Vue
											源码，打开前端晋级之路</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="02 现代 Web 应用开发的特征一：数据驱动">02 现代 Web
											应用开发的特征一：数据驱动</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="03 现代 Web 应用开发的特征二：组件化">03 现代 Web
											应用开发的特征二：组件化</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="04 Vue 的类和 Mixin">04 Vue 的类和 Mixin</p>
									</Link>
								</div>
								<div className="author_box" />
								<div className="price_con">
									<Link className="price_sale_link" to="#"><p className="price_sale">订阅</p></Link>
								</div>
							</div>
						</li>
						<li className="list_item">
							<Link to="#">
								<div className="special_img"
								     style={{backgroundImage: "url(" + BookPython + ")" }} />
							</Link>
							<div className="text_con">
								<Link to="#">
									<p className="text_con_title">Vue3核心源码详解38讲</p>
								</Link>
								<p className="text_desc">全面分析 Vue 源码，透彻掌握 Vue 技术原理</p>
								<div className="text_info">
									<i className="iconfont">&#xe654;</i>
									<span>共38节</span>
									<i className="iconfont">&#xe654;</i>
									<span>1人已购买</span>
								</div>
								<div className="try_read_book">
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="01 开篇词：学习 Vue 源码，打开前端晋级之路">01 开篇词：学习 Vue
											源码，打开前端晋级之路</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="02 现代 Web 应用开发的特征一：数据驱动">02 现代 Web
											应用开发的特征一：数据驱动</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="03 现代 Web 应用开发的特征二：组件化">03 现代 Web
											应用开发的特征二：组件化</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="04 Vue 的类和 Mixin">04 Vue 的类和 Mixin</p>
									</Link>
								</div>
								<div className="author_box" />
								<div className="price_con">
									<Link className="price_sale_link" to="#"><p className="price_sale">订阅</p></Link>
								</div>
							</div>
						</li>
						<li className="list_item">
							<Link to="#">
								<div className="special_img"
								     style={{backgroundImage: "url(" + BookPython + ")" }} />
							</Link>
							<div className="text_con">
								<Link to="#">
									<p className="text_con_title">Vue3核心源码详解38讲</p>
								</Link>
								<p className="text_desc">全面分析 Vue 源码，透彻掌握 Vue 技术原理</p>
								<div className="text_info">
									<i className="iconfont">&#xe654;</i>
									<span>共38节</span>
									<i className="iconfont">&#xe654;</i>
									<span>1人已购买</span>
								</div>
								<div className="try_read_book">
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="01 开篇词：学习 Vue 源码，打开前端晋级之路">01 开篇词：学习 Vue
											源码，打开前端晋级之路</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="02 现代 Web 应用开发的特征一：数据驱动">02 现代 Web
											应用开发的特征一：数据驱动</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="03 现代 Web 应用开发的特征二：组件化">03 现代 Web
											应用开发的特征二：组件化</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="04 Vue 的类和 Mixin">04 Vue 的类和 Mixin</p>
									</Link>
								</div>
								<div className="author_box" />
								<div className="price_con">
									<Link className="price_sale_link" to="#"><p className="price_sale">订阅</p></Link>
								</div>
							</div>
						</li>
						<li className="list_item">
							<Link to="#">
								<div className="special_img"
								     style={{backgroundImage: "url(" + BookPython + ")" }} />
							</Link>
							<div className="text_con">
								<Link to="#">
									<p className="text_con_title">Vue3核心源码详解38讲</p>
								</Link>
								<p className="text_desc">全面分析 Vue 源码，透彻掌握 Vue 技术原理</p>
								<div className="text_info">
									<i className="iconfont">&#xe654;</i>
									<span>共38节</span>
									<i className="iconfont">&#xe654;</i>
									<span>1人已购买</span>
								</div>
								<div className="try_read_book">
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="01 开篇词：学习 Vue 源码，打开前端晋级之路">01 开篇词：学习 Vue
											源码，打开前端晋级之路</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="02 现代 Web 应用开发的特征一：数据驱动">02 现代 Web
											应用开发的特征一：数据驱动</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="03 现代 Web 应用开发的特征二：组件化">03 现代 Web
											应用开发的特征二：组件化</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="04 Vue 的类和 Mixin">04 Vue 的类和 Mixin</p>
									</Link>
								</div>
								<div className="author_box" />
								<div className="price_con">
									<Link className="price_sale_link" to="#"><p className="price_sale">订阅</p></Link>
								</div>
							</div>
						</li>
						<li className="list_item">
							<Link to="#">
								<div className="special_img"
								     style={{backgroundImage: "url(" + BookPython + ")" }} />
							</Link>
							<div className="text_con">
								<Link to="#">
									<p className="text_con_title">Vue3核心源码详解38讲</p>
								</Link>
								<p className="text_desc">全面分析 Vue 源码，透彻掌握 Vue 技术原理</p>
								<div className="text_info">
									<i className="iconfont">&#xe654;</i>
									<span>共38节</span>
									<i className="iconfont">&#xe654;</i>
									<span>1人已购买</span>
								</div>
								<div className="try_read_book">
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="01 开篇词：学习 Vue 源码，打开前端晋级之路">01 开篇词：学习 Vue
											源码，打开前端晋级之路</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="02 现代 Web 应用开发的特征一：数据驱动">02 现代 Web
											应用开发的特征一：数据驱动</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="03 现代 Web 应用开发的特征二：组件化">03 现代 Web
											应用开发的特征二：组件化</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="04 Vue 的类和 Mixin">04 Vue 的类和 Mixin</p>
									</Link>
								</div>
								<div className="author_box" />
								<div className="price_con">
									<Link className="price_sale_link" to="#"><p className="price_sale">订阅</p></Link>
								</div>
							</div>
						</li>
						<li className="list_item">
							<Link to="#">
								<div className="special_img"
								     style={{backgroundImage: "url(" + BookPython + ")" }} />
							</Link>
							<div className="text_con">
								<Link to="#">
									<p className="text_con_title">Vue3核心源码详解38讲</p>
								</Link>
								<p className="text_desc">全面分析 Vue 源码，透彻掌握 Vue 技术原理</p>
								<div className="text_info">
									<i className="iconfont">&#xe654;</i>
									<span>共38节</span>
									<i className="iconfont">&#xe654;</i>
									<span>1人已购买</span>
								</div>
								<div className="try_read_book">
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="01 开篇词：学习 Vue 源码，打开前端晋级之路">01 开篇词：学习 Vue
											源码，打开前端晋级之路</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="02 现代 Web 应用开发的特征一：数据驱动">02 现代 Web
											应用开发的特征一：数据驱动</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="03 现代 Web 应用开发的特征二：组件化">03 现代 Web
											应用开发的特征二：组件化</p>
									</Link>
									<Link className="try_read_item" to="#">
										<div className="try_read_img" />
										<p className="try-read-title" title="04 Vue 的类和 Mixin">04 Vue 的类和 Mixin</p>
									</Link>
								</div>
								<div className="author_box" />
								<div className="price_con">
									<Link className="price_sale_link" to="#"><p className="price_sale">订阅</p></Link>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	)
}

export default Special;